<template>
  <ConfigProvider
    :theme="{
      components: {
        Tabs: {
          lineWidth: 0,
        },
        Input: borderStyle,
        Select: borderStyle,
        InputNumber: borderStyle,
      },
    }"
  >
    <Tabs
      v-model:activeKey="activeKey"
      tab-position="left"
      destroyInactiveTabPane
    >
      <template #renderTabBar>
        <Flex vertical justify="space-between">
          <Collapse
            v-model:activeKey="collapseKey"
            ghost
            accordion
            class="tab-collapse"
            ><template v-for="(item, index) in panes">
              <CollapsePanel
                v-if="item.group.length"
                :key="index"
                :header="item.title"
              >
                <Space direction="vertical">
                  <Button
                    v-for="button in item.group"
                    :key="`button${button.key}`"
                    type="text"
                    block
                    :class="{ active: activeKey == button.key }"
                    @click="activeKey = button.key"
                    >{{ button.title }}</Button
                  >
                </Space>
              </CollapsePanel>
            </template>
          </Collapse>

          <Flex vertical justify="center" align="center" class="-ml-5">
            <div class="fast-config" @click="fastConfig">快速配置</div>
            <span>协议版本:{{ pageData.protobufVersion }}</span>
          </Flex>
        </Flex>
      </template>
      <template v-for="paneGroup in panes">
        <TabPane
          class="ShadeBox"
          :class="ShadeShow ? 'StopEvent' : 'StartEvent'"
          v-for="pane in paneGroup.group"
          :key="pane.key"
          :tab="pane.title"
        >
          <div class="Shade" v-if="ShadeShow">
            <Progress type="circle" :percent="PercentNum" />
          </div>
          <component
            :is="pane.content"
            :pageData="pageData"
            :fastConfig="pane.fastConfig"
          />
        </TabPane>
      </template>
    </Tabs>
  </ConfigProvider>
  <Modal
    title="快速配置模板"
    v-model:open="openAllConfigVisible"
    :width="1400"
    :mask-closable="false"
    :keyboard="false"
    :footer="null"
    centered
    destroy-on-close
    class="deviceTabsModal"
  >
    <OpenAllConfig :page-data="pageData" @close="close" />
  </Modal>
</template>

<script setup lang="tsx">
import { computed, provide, ref, watch } from 'vue';
import { hasPermission } from '@/permission';
import { pageStore } from '@/stores/modules/page';
import AllFile from '@/views/components/AllFile.vue';
import Brand from '@/views/components/Brand.vue';
import Device from '@/views/components/Device.vue';
import Energy from '@/views/components/Energy.vue';
import Ethernet from '@/views/components/Ethernet.vue';
import File from '@/views/components/File.vue';
import GpioControl from '@/views/components/GpioControl.vue';
import Gps from '@/views/components/Gps.vue';
import LogFile from '@/views/components/LogFile.vue';
import Mesh from '@/views/components/Mesh.vue';
import Meter_2 from '@/views/components/Meter-2.vue';
import Meter from '@/views/components/Meter.vue';
import Mqtt_2 from '@/views/components/Mqtt-2.vue';
import Mqtt from '@/views/components/Mqtt.vue';
import MultimediaData from '@/views/components/MultimediaData.vue';
import Netty from '@/views/components/Netty.vue';
import Ntp from '@/views/components/Ntp.vue';
import Operate from '@/views/components/Operate.vue';
import Operation from '@/views/components/Operation.vue';
import Report from '@/views/components/Report.vue';
import Rtmp from '@/views/components/Rtmp.vue';
import RunningMode from '@/views/components/RunningMode.vue';
import Schedule from '@/views/components/Schedule.vue';
import Theme from '@/views/components/Theme.vue';
import Volume from '@/views/components/Volume.vue';
import Warn_2 from '@/views/components/Warn-2.vue';
import Warn from '@/views/components/Warn.vue';
import WarningData from '@/views/components/WarningData.vue';
import WaveformFile from '@/views/components/WaveformFile.vue';
import Weather from '@/views/components/Weather.vue';
import OpenAllConfig from '@/views/devices/allDevice/components/OpenAllConfig.vue';
import {
  Button,
  Collapse,
  CollapsePanel,
  ConfigProvider,
  Flex,
  Modal,
  Progress,
  Space,
  TabPane,
  Tabs,
} from 'ant-design-vue';
import { borderStyle } from '@/constant/theme';

const PageStore = pageStore();

const PercentNum = ref(0);
watch(
  () => PageStore.ProgressNum,
  (val: any) => {
    PercentNum.value = parseInt(val);
  },
  {
    immediate: true,
  },
);

const ShadeShow = ref(false);
watch(
  () => PageStore.OpenProgress,
  (val: any) => {
    ShadeShow.value = val;
  },
  {
    immediate: true,
  },
);

defineOptions({
  name: 'DeviceTabs',
});

interface Props {
  pageData: any;
}
const props = defineProps<Props>();

const openAllConfigVisible = ref(false);
const desktopTerminal = props.pageData.deviceType == '3';
const protobufVersion = Number(props.pageData.protobufVersion);
const panes: any = computed(() =>
  [
    {
      title: '预警管理',
      group: [
        {
          title: '运行模式',
          key: 'runningMode',
          show: true,
          code: ['device:operationMenu1'],
          fastConfig: true,
          content: RunningMode,
        },
        {
          title: '授权参数',
          key: 'mqtt',
          show: Number(protobufVersion) < 2 || desktopTerminal,
          code: ['device:operationMenu2'],
          fastConfig: true,
          content: Mqtt,
        },
        {
          title: '授权参数',
          key: 'mqtt',
          show: Number(protobufVersion) > 1 && !desktopTerminal,
          code: ['device:operationMenu2'],
          fastConfig: true,
          content: Mqtt_2,
        },
        {
          title: '预警参数',
          key: 'warn',
          show: Number(protobufVersion) < 2,
          code: ['device:operationMenu3'],
          fastConfig: true,
          content: Warn,
        },
        {
          title: '预警参数',
          key: 'warn',
          show: Number(protobufVersion) > 1,
          code: ['device:operationMenu3'],
          fastConfig: true,
          content: Warn_2,
        },
        {
          title: '速报参数',
          key: 'report',
          show: true,
          code: ['device:operationMenu4'],
          fastConfig: true,
          content: Report,
        },
        {
          title: '声音参数',
          key: 'volume',
          show: true,
          code: ['device:operationMenu5'],
          fastConfig: true,
          content: Volume,
        },
      ],
    },
    {
      title: '服务管理',
      group: [
        {
          title: '管理服务',
          key: 'netty',
          show: true,
          code: ['device:operationMenu6'],
          fastConfig: true,
          content: Netty,
        },
        {
          title: '文件服务',
          key: 'file',
          show: true,
          code: ['device:operationMenu7'],
          fastConfig: true,
          content: File,
        },
        {
          title: '定位服务',
          key: 'gps',
          show: true,
          code: ['device:operationMenu8'],
          fastConfig: true,
          content: Gps,
        },
        {
          title: '对时服务',
          key: 'ntp',
          show: true,
          code: ['device:operationMenu9'],
          fastConfig: true,
          content: Ntp,
        },
        {
          title: '气象服务',
          key: 'weather',
          show: true,
          code: ['device:operationMenu10'],
          fastConfig: true,
          content: Weather,
        },
      ],
    },
    {
      title: '设备管理',
      group: [
        {
          title: '首页配置',
          key: 'theme',
          show: !desktopTerminal,
          code: ['device:operationMenu11'],
          fastConfig: true,
          content: Theme,
        },
        {
          title: '屏显配置',
          key: 'energy',
          show: !desktopTerminal,
          code: ['device:operationMenu12'],
          fastConfig: true,
          content: Energy,
        },
        {
          title: '设备配置',
          key: 'device',
          show: true,
          code: ['device:operationMenu13'],
          fastConfig: true,
          content: Device,
        },
        {
          title: '网络调试',
          key: 'ethernet',
          show: true,
          code: ['device:operationMenu14'],
          content: Ethernet,
        },
        // {
        //   title: '设备文件',
        //   key: 'operation',
        //   show: true,
        //   code: ['device:operationMenu15'],
        //   content: Operation,
        // },
        {
          title: '远程操作',
          key: 'rtmp',
          show: !desktopTerminal,
          code: ['device:operationMenu16'],
          content: Rtmp,
        },
        {
          title: '快捷操作',
          key: 'operate',
          show: true,
          code: ['device:operationMenu17'],
          content: Operate,
        },
        {
          title: '日程管理',
          key: 'schedule',
          show: props.pageData?.deviceType === '3' ? true : false,
          code: ['device:operationMenu22'],
          fastConfig: true,
          content: Schedule,
        },
        {
          title: '品牌配置',
          key: 'brand',
          show: desktopTerminal && Number(protobufVersion) > 1,
          code: ['device:operationMenu21'],
          fastConfig: true,
          content: Brand,
        },
      ],
    },
    {
      title: '外围设备',
      group: [
        {
          title: '无线组网',
          key: 'Mesh',
          show: !desktopTerminal,
          code: ['device:operationMenu18'],
          fastConfig: true,
          content: Mesh,
        },
        {
          title: 'GPIO配置',
          key: 'gpioControl',
          show: !desktopTerminal,
          code: ['device:operationMenu19'],
          content: GpioControl,
        },
        {
          title: '烈度计',
          key: 'Meter',
          show: !desktopTerminal && Number(protobufVersion) < 2,
          code: ['device:operationMenu20'],
          fastConfig: true,
          content: Meter,
        },
        {
          title: '烈度计',
          key: 'Meter',
          show: desktopTerminal || Number(protobufVersion) > 1,
          code: ['device:operationMenu20'],
          fastConfig: true,
          content: Meter_2,
        },
      ],
    },
    {
      title: '设备文件',
      group: [
        {
          title: '多媒体文件',
          key: 'multimediaData',
          show: true,
          code: ['device:operationMenu23'],
          content: MultimediaData,
        },
        {
          title: '预警文件',
          key: 'warningData',
          show: true,
          code: ['device:operationMenu24'],
          content: WarningData,
        },
        {
          title: '波形文件',
          key: 'waveformFile',
          show: true,
          code: ['device:operationMenu25'],
          content: WaveformFile,
        },
        {
          title: '日志文件',
          key: 'logFile',
          show: true,
          code: ['device:operationMenu26'],
          content: LogFile,
        },
        {
          title: '全部文件',
          key: 'allFile',
          show: true,
          code: ['device:operationMenu27'],
          content: AllFile,
        },
      ],
    },
  ].map((item) => {
    const buttons = item.group.filter(
      (Item) => Item.show && hasPermission(Item.code),
    );
    return { title: item.title, group: buttons };
  }),
);
const emit = defineEmits(['close']);
const collapseKey = ref(0);
const activeKey = ref(panes.value[0].group[0].key);
const fastConfig = () => {
  openAllConfigVisible.value = true;
};

const close = () => {
  console.log('关闭');

  openAllConfigVisible.value = false;
  emit('close');
};
provide('fastConfig', fastConfig);
provide('tab', () => activeKey.value);
</script>
<style lang="scss" scoped>
.StopEvent {
  pointer-events: none;
}
.StartEvent {
  pointer-events: auto;
}
.ShadeBox {
  // border: 1px solid blue;
  position: relative;
  .Shade {
    pointer-events: none;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.ant-tabs {
  height: 60vh;
}

:deep(h5) {
  width: 100%;
  font-size: 16px;
  margin: 0px 20px 20px 20px;
  padding-bottom: 5px;
  border-bottom: 1px outset;
}

:deep(.tips) {
  width: 100%;
  margin: 20px;
  &::before {
    display: inline-block;
    margin-inline-end: 4px;
    color: #ff4d4f;
    content: '*';
  }
}
:deep(.pro-form-modal) {
  max-height: 99%;
  overflow-y: auto;
  margin-right: -24px;
  padding-right: 24px;
}
:deep(.footer-buttons) {
  position: absolute;
  bottom: -35px;
  right: 0;
}
:deep(.warn-form-modal) {
  .warn-none .ant-checkbox-group > {
    :nth-child(2),
    :nth-child(4),
    :nth-child(5),
    :nth-child(6),
    :nth-child(7) {
      display: none;
    }
  }
}

:deep(.operate-form-modal) {
  h5 {
    margin-top: 20px;
    margin-left: 0px;
  }
  .img {
    text-align: center;
    p {
      margin-bottom: 10px;
    }
  }
  .ant-btn {
    margin-right: 15px;
    font-size: 12px;
    height: auto;
    span {
      vertical-align: middle;
    }
  }
  .svg {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    display: inline-block;
    color: #fff;
  }
}
:deep(.operation-form-modal) {
  .ant-spin-container {
    max-height: calc(60vh - 60px);
    margin-top: 10px;
    overflow-y: auto;
  }
  .ant-list-header {
    border-bottom-width: 1px;
    .text-base > span {
      cursor: pointer;
      &:hover {
        color: #6ad7ca;
      }
    }
  }
  .ant-list-item-meta {
    align-items: center;
  }
  .ant-list-item-meta-title {
    font-size: 18px !important;
  }
  .ant-list-item {
    cursor: pointer;
  }
  .stop-click {
    cursor: not-allowed;
  }
}
.fast-config {
  margin-bottom: 10px;
  padding: 6px 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  text-align: center;
  line-height: initial;
  cursor: pointer;
}
</style>
